 /*
 * @description: 商家物料新建批次
 * @Author: along
 * @Date: 2021-03-19
 * @Last Modified by: along
 * @Last Modified time: 2021-03-19
 */
<template>
    <el-dialog
        :title="TYPE == 'add' ? '新建信息' : '编辑信息'"
        :visible.sync="dialogVisible"
        width="614px"
        :close-on-click-modal="false"
        class="createBranch"
    >
        <div class="batch">
            <div
                class="batch-box"
                :style="{marginTop: '24px'}"
            >
                <p class="batch-box-title">公司名称:</p>
                <el-select
                    v-model="dialog_user"
                    filterable
                    remote
                    size="small"
                    reserve-keyword
                    placeholder="请输入公司名称"
                    :remote-method="remoteMethod"
                    :loading="loading"
                    :style="{width: '450px'}"
                    :disabled="TYPE == 'edit' ? true : false"
                >
                    <el-option
                        v-for="item in suggestList"
                        :key="item.hire_no"
                        :label="item.company_name"
                        :value="item.hire_no"
                    />
                </el-select>
            </div>
            <div
                class="batch-box"
                :style="{marginTop: '24px'}"
            >
                <p class="batch-box-title">产品名称:</p>
                <el-input
                    v-model="dialog_name"
                    placeholder="请输入产品名称"
                    size="small"
                    :style="{width: '450px'}"
                />
            </div>
        </div>
        <span
            slot="footer"
            class="dialog-footer"
        >
            <el-button
                @click="dialogVisible = false"
                size="small"
                :style="{width: '100px', marginRight: '60px'}"
            >
                取 消
            </el-button>
            <el-button
                type="primary"
                size="small"
                :disabled="!dialog_user || !dialog_name"
                :style="{width: '100px'}"
                @click="confirmBatch()"
            >
                确 定
            </el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    data () {
        return {
            TYPE: '', //add:新建 edit: 编辑
            dialogVisible: false,
            dialog_user: '',//公司名称
            dialog_name: '',//产品名称
            suggestList: [],
            loading: false
        };
    },
    methods: {
        /**
         * @description 获取商家列表
         */
        getSuggest (keyword) {
            this.$post('/student/room_series%5Cget_company_list', {
                keyword: keyword
            }, resp => {
                if (resp.code == 1) {
                    this.suggestList = resp.data.list;
                }
            });
        },

        /**
         * @description 搜索公司名称
         */
        remoteMethod (query) {
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.getSuggest(query);
                }, 200);
            }
        },

        /**
         * @description 显示弹窗
         */
        show (type, dialog_user = '', dialog_name = '') {
            this.TYPE = type;
            this.dialog_user = dialog_user ? dialog_user : '';
            this.dialog_name = dialog_name ? dialog_name : '';
            this.dialogVisible = true;
            this.getSuggest('');
        },

        /**
         * @description 关闭弹窗
         */
        close () {
            this.dialogVisible = false;
        },

        /**
         * @description 确定新建
         */
        confirmBatch () {
            if(this.TYPE == 'add') {
                this.$emit('confirm', {
                    company_name: this.dialog_user,
                    material_name: this.dialog_name
                });
            }
            if(this.TYPE == 'edit') {
                this.$emit('update', {
                    company_name: this.dialog_user,
                    material_name: this.dialog_name
                });
            }
            this.close();
        }
    }
};
</script>

<style lang="less" scoped>
.createBranch {
    .batch-box {
        display: flex;
        align-items: center;
        .batch-box-title {
            white-space: nowrap;
            margin-right: 16px;
        }
    }
    .dialog-footer {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 14px;
    }
}
</style>
<style lang="less">
.createBranch {
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-dialog__body {
        padding: 14px 94px 24px 94px;
    }
}
</style>